<template>
  <div class="home">
    <h1>Pinia - 基本使用</h1> 
    <h3>name: {{ name }}</h3>
    <h3>age: {{ age }}</h3>
    <h3>level: {{ level }}</h3>
    <button @click="changeState">修改state</button>
    <button @click="resetState">重置state</button>
  </div>
</template>

<script setup>
// @ is an alias to /src
import { storeToRefs } from 'pinia';
import useUser from '@/pinia/user'
const storeUser = useUser()
const {name, age, level} = storeToRefs(useUser())
// 修改state
function changeState(){

  // 1.单个修改
  // storeUser.name = 'jack'
  // storeUser.age = '28'
  // storeUser.level = '20'

  // 2.一次性修改多个状态
  // storeUser.$patch({
  //   name:"tom",
  //   age:80
  // })
  // 3.替换state为新的对象
  storeUser.$state ={
    name:"jerry",
    age:12,
    level:20
  }
}
// 重置
const resetState = ()=>{
  storeUser.$reset()
}
</script>
